<!--
 * @Author: your name
 * @Date: 2021-08-24 17:25:00
 * @LastEditTime: 2021-08-24 21:44:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /web-blog/src/pages/dashboard/blog/publish.vue
-->
<template>
  <div>
    <a-card class="card">
      <div class="select">
        <a-select default-value="lucy" style="width: 120px" @change="handleChange">
          <a-select-option value="jack">
            原创
          </a-select-option>
          <a-select-option value="lucy">
            转载
          </a-select-option>
        </a-select>
        <div class="titleInput">
          <a-input ref="userNameInput" v-model="userName" placeholder="请输入文章标题" >
            <a-icon slot="prefix" type="edit" />
          </a-input>
        </div>
      </div>
    </a-card>
    <a-card  class="new-page" :style="`min-height: ${pageMinHeight}px`">
      <div class="markdown">
          <div class="container">
              <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
      </div>
      <div class="labelBox">
        <!-- 分类 -->
        <div>
          <a-select
              show-search
              placeholder="请选择分类"
              option-filter-prop="children"
              style="width: 490px"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleChange"
            >
              <a-select-option value="jack">
                Jack
              </a-select-option>
              <a-select-option value="lucy">
                Lucy
              </a-select-option>
              <a-select-option value="tom">
                Tom
              </a-select-option>
          </a-select>
        </div>
        <!-- 标签 -->
        <div class="rightSelect">
          <a-select
            show-search
            placeholder="请选择标签"
            option-filter-prop="children"
            style="width: 490px"
            :filter-option="filterOption"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="handleChange"
          >
            <a-select-option value="jack">
              Jack
            </a-select-option>
            <a-select-option value="lucy">
              Lucy
            </a-select-option>
            <a-select-option value="tom">
              Tom
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="picture">
        <a-input ref="userNameInput" v-model="userName" placeholder="图片链接地址" >
          <a-icon slot="prefix" type="picture" />
        </a-input>
      </div>

      <div class="textarea">
        <a-textarea
          v-model="value"
          placeholder="请输入关于文章的摘要，这将展示在文章同步，吸引更多读者"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </div>

      <div class="sumbitBtn">
        <a-button icon="arrow-left" class="btn"> 返回 </a-button>
        <a-button type="dashed" icon="check" class="btn"> 保存 </a-button>
        <a-button type="primary" icon="cloud-upload"> 发布 </a-button>
      </div>
      </div>
    </a-card>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  export default {
    name: 'NewPage',
    props: [],
    components: {
        mavonEditor,
    },
    data() {
      return {
        desc: '发表文章内容',
        content:'',
        html:'',
        configs: {},
        value: "", // 文章说明
      }
    },
    computed: {
      ...mapState('setting', ['pageMinHeight']),
    },
    methods: {
      // 将图片上传到服务器，返回地址替换到md中
      $imgAdd(pos, $file){
        let formdata = new FormData();
        console.log($file);
          this.$upload.post('/上传接口地址', formdata).then(res => {
            console.log(res.data);
            this.$refs.md.$img2Url(pos, res.data);
        }).catch(err => {
            console.log(err)
        })
      },
    // 所有操作都会被解析重新渲染
      change(value, render){
        // render 为 markdown 解析后的结果[html]
        this.html = render;
      },
      // 提交
      submit(){
          console.log(this.content);
          console.log(this.html);
          this.$message.success('提交成功，已打印至控制台！');
      }
    }
  }
</script>

<style lang="less" scoped>
.new-page{
  height: 100%;
  background-color: @base-bg-color;
  text-align: center;
  h1{
    font-size: 48px;
  }
}

.select {
  z-index: 99;
  display: flex;
}
.markdown {
  margin-top: 20px;
}

.card{
  margin-bottom: 24px;
}

.titleInput {
  margin-left: 30px;
}

/deep/.ant-input-affix-wrapper .ant-input:not(:first-child) {
  width: 780px;
}

.labelBox {
  display: flex;
  margin-top: 20px;
}

.rightSelect {
  margin-left: 20px;
}

.picture {
  margin-top: 20px;
}

.textarea {
  margin-top: 20px;
}

.sumbitBtn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.btn {
  margin-right: 10px;
}
</style>
